import React, {Component} from 'react';
import {ScrollView, StyleSheet, Alert, Image} from 'react-native';
import {
  Text,
  View,
  Assets,
  Constants,
  Button,
  Colors,
  Typography,
  ButtonProps,
} from 'react-native-ui-lib';
import {TestCase, TestSuite} from '@rnoh/testerino';

const ButtonSpace = 20;
const plusIcon = Assets.getAssetByPath('icons.demo.plus');
const settingsIcon = Assets.getAssetByPath('icons.demo.settings');
const labelButton = {label: 'Animated'};
const iconButton = {round: true};

export default class ButtonsScreen extends Component {
  state = {
    backgroundColor: Colors.yellow30,
    label: 'Button',
    // outline: true,
    buttonProps: labelButton as ButtonProps,

    animProp1: labelButton,
    animProp2: labelButton,
    animProp3: labelButton,
  };

  changeProps = () => {
    if (this.state.buttonProps === labelButton) {
      this.setState({buttonProps: iconButton});
    }
    if (this.state.buttonProps === iconButton) {
      this.setState({buttonProps: labelButton});
    }
  };


  toggleAnimate = (key: string) => {
    const current = this.state[key];
    const next = current === labelButton ? iconButton : labelButton;
    this.setState({[key]: next});
  };

  render() {
    const {buttonProps, animProp1, animProp2, animProp3} = this.state;

    return (
      <TestSuite name="Button">
        <TestCase itShould="设置 backgroundColor 属性">
          <View padding-10 centerH>
            <Button
              backgroundColor="#30B650"
              label="#30B650"
              labelStyle={{fontWeight: '600'}}
              enableShadow
              style={{marginBottom: ButtonSpace}}
            />
            <Button
              backgroundColor="red"
              label="red"
              labelStyle={{fontWeight: '600'}}
              enableShadow
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 borderRadius">
          <View padding-10 centerH>
            <Button
              backgroundColor="#30B650"
              label="SHUFFLE PLAY 7"
              labelStyle={{fontWeight: '600'}}
              enableShadow
              borderRadius={7}
              style={{marginBottom: ButtonSpace}}
            />
            <Button
              backgroundColor="#30B650"
              label="SHUFFLE PLAY 20"
              labelStyle={{fontWeight: '600'}}
              enableShadow
              borderRadius={20}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置outline, outlineColor">
          <View padding-10 centerH>
            <Button
              outline
              outlineColor={'red'}
              label="SHOP HOLIDAY red"
              borderRadius={0}
              size={Button.sizes.medium}
              text60
              labelStyle={{fontWeight: '700', letterSpacing: 4}}
              style={{borderWidth: 3, marginBottom: ButtonSpace}}
            />
            <Button
              outline
              outlineColor={'blue'}
              label="SHOP HOLIDAY blue"
              borderRadius={0}
              size={Button.sizes.medium}
              text60
              labelStyle={{fontWeight: '700', letterSpacing: 4}}
              style={{borderWidth: 3}}
            />
          </View>
        </TestCase>

        <TestCase itShould="size属性">
          <View padding-10 centerH>
            <Button label={'Default'} style={{marginBottom: ButtonSpace}} />
            <Button
              label={'Medium'}
              size={Button.sizes.medium}
              style={{marginBottom: ButtonSpace}}
            />
            <Button
              label={'Small'}
              size={Button.sizes.small}
              style={{marginBottom: ButtonSpace}}
            />
            <Button
              label={'xSmall'}
              size={Button.sizes.xSmall}
              style={{marginBottom: ButtonSpace}}
            />
            <Button
              label={'This is a button with long text'}
              style={{marginBottom: ButtonSpace}}
            />
          </View>
        </TestCase>
        <TestCase itShould="disabled属性">
          <View padding-10 centerH>
            <Button
              label={'Disabled true'}
              disabled
              style={{marginBottom: ButtonSpace}}
            />
            <Button label={'Disabled false'} />
          </View>
        </TestCase>
        <TestCase itShould="Outline属性">
          <View padding-10 centerH>
            <Button
              label="Outline"
              outline
              style={{marginBottom: ButtonSpace}}
            />
            <Button
              label="Outline M"
              size={Button.sizes.medium}
              outline
              style={{marginBottom: ButtonSpace}}
            />
            <Button
              label="Outline S"
              size={Button.sizes.small}
              outline
              style={{marginBottom: ButtonSpace}}
            />
            <Button
              label="Red Outline"
              outline
              outlineWidth={3}
              outlineColor={Colors.$outlineDanger}
              style={{marginBottom: ButtonSpace}}
            />
            <Button
              label="Outline with background"
              outlineColor={Colors.$outlineDisabledHeavy}
              backgroundColor={Colors.$backgroundNeutralIdle}
              style={{marginBottom: ButtonSpace}}
            />
            <Button
              label="Disabled Outline"
              outline
              disabled
              style={{marginBottom: ButtonSpace}}
            />
          </View>
        </TestCase>
        <TestCase itShould="Round属性">
          <View padding-10 centerH>
            <View row width={'100%'} center>
              <Button
                round
                label="round"
                backgroundColor="#FF69B4"
                style={{margin: ButtonSpace}}
                size={Button.sizes.xSmall}
              />
              <Button
                round
                backgroundColor="#ff4fa7"
                style={{margin: ButtonSpace}}
                label="round"
                size={Button.sizes.small}
              />
              <Button
                round
                backgroundColor="#ff369b"
                style={{margin: ButtonSpace}}
                label="round"
                size={Button.sizes.medium}
              />
              <Button
                round
                backgroundColor="#ff1d8e"
                style={{margin: ButtonSpace}}
                label="round"
              />
            </View>
          </View>
        </TestCase>

        <TestCase itShould="Animated属性: 点击每个按钮独立触发布局动画 (Left/Center/Right)">
          <View padding-10 centerH>
            <Button
              size={'small'}
              style={{marginBottom: ButtonSpace / 4, marginLeft: ButtonSpace}}
              backgroundColor={Colors.$backgroundSuccessHeavy}
              iconSource={settingsIcon}
              {...animProp1}
              onPress={() => this.toggleAnimate('animProp1')}
              iconOnRight
              animateLayout
              animateTo={'left'}
              label={animProp1 === labelButton ? "Left Anim" : undefined}
            />

            <Button
              size={'medium'}
              style={{marginBottom: ButtonSpace / 4}}
              backgroundColor={Colors.$backgroundSuccessHeavy}
              iconSource={settingsIcon}
              {...animProp2}
              onPress={() => this.toggleAnimate('animProp2')}
              animateLayout
              label={animProp2 === labelButton ? "Center Anim" : undefined}
            />

            <Button
              style={{marginBottom: ButtonSpace / 4, marginRight: ButtonSpace}}
              backgroundColor={Colors.$backgroundSuccessHeavy}
              iconSource={settingsIcon}
              {...animProp3}
              onPress={() => this.toggleAnimate('animProp3')}
              animateLayout
              animateTo={'right'}
              label={animProp3 === labelButton ? "Right Anim" : undefined}
            />
            
            <Text text90 grey40 marginT-5>点击按钮切换状态</Text>
          </View>
        </TestCase>

        <TestCase
          itShould="onPress属性"
          initialState={false}
          arrange={({setState, reset}) => (
            <View padding-10 centerH>
              <Button
                onPress={() => {
                  Alert.alert('点击了’点我‘');
                  setState(true);
                }}>
                <Text white>点我</Text>
              </Button>
            </View>
          )}
          assert={({state, expect}) => {
            expect(state).to.be.true;
          }}
        />
        <TestCase itShould="fullWidth属性">
          <Button fullWidth label="Full Width" marginB-10 />
          <Button
            fullWidth
            size="medium"
            bg-$backgroundDangerLight
            $textDefault
            label="Medium Size Full Width"
            marginB-10
          />
          <Button
            fullWidth
            size="small"
            bg-$backgroundSuccessLight
            black
            label="Small Size Full Width"
            style={{marginBottom: ButtonSpace}}
          />
        </TestCase>

        <TestCase itShould="[color] 按钮文本颜色对比 (默认白 vs 黄色)">
          <View row spread padding-10>
            <Button
              label="Default Color"
              backgroundColor={Colors.violet30}
            />
            <Button
              label="Custom Color"
              backgroundColor={Colors.violet30}
              color={Colors.yellow30}
            />
          </View>
        </TestCase>

        <TestCase itShould="[labelProps] 文本属性透传对比 (正常 vs 单行截断)">
          <View row spread padding-10>
             <View flex marginR-10>
                <Button
                  label="Long text wraps normally by default behavior"
                  backgroundColor={Colors.blue30}
                  size={Button.sizes.small}
                />
             </View>
             <View flex>
                <Button
                  label="Long text truncated via labelProps"
                  backgroundColor={Colors.blue30}
                  size={Button.sizes.small}
                  labelProps={{numberOfLines: 1}}
                />
             </View>
          </View>
        </TestCase>

        <TestCase itShould="[link, hyperlink] 链接模式对比 (普通 vs 链接 vs 超链接)">
          <View row spread padding-10>
            <Button
              label="Button"
              backgroundColor={Colors.grey30}
              size={Button.sizes.small}
            />
            <Button
              link
              label="Link"
              linkColor={Colors.blue30}
            />
            <Button
              hyperlink
              label="Hyperlink"
              linkColor={Colors.red30}
            />
          </View>
        </TestCase>

        <TestCase itShould="[disabledBackgroundColor] 禁用背景色对比 (默认灰 vs 自定义黑)">
          <View row spread padding-10>
            <Button
              disabled
              label="Default Disabled"
            />
            <Button
              disabled
              disabledBackgroundColor={Colors.black}
              label="Custom Disabled"
            />
          </View>
        </TestCase>

        <TestCase itShould="[getActiveBackgroundColor] 按下状态对比 (普通 vs 按下变红)">
          <View row spread padding-10>
            <Button
              label="Normal Press"
              backgroundColor={Colors.blue30}
            />
            <Button
              label="Press turns Red"
              backgroundColor={Colors.blue30}
              getActiveBackgroundColor={() => Colors.red30}
            />
          </View>
        </TestCase>

        <TestCase itShould="[iconStyle, iconProps] 图标样式与透传属性对比">
          <View padding-10>
            <Text text90 grey40 marginB-5>1. iconStyle: 颜色与大小</Text>
            <View row spread marginB-15>
              <Button
                label="Default"
                backgroundColor={Colors.grey30}
                iconSource={plusIcon}
              />
              <Button
                label="Tint Red & Big"
                backgroundColor={Colors.grey30}
                iconSource={plusIcon}
                iconStyle={{tintColor: Colors.red30, width: 50, height: 50}}
              />
            </View>

            <Text text90 grey40 marginB-5>2. iconProps: 透明度 / 拉伸</Text>
            <View row spread>
               <Button
                label="Opac 0.2"
                backgroundColor={Colors.grey30}
                iconSource={plusIcon}
                iconProps={{opacity: 0.2}}
              />

              <Button
                label="Stretch"
                backgroundColor={Colors.grey30}
                iconSource={plusIcon}
                iconStyle={{width: 30, height: 10}} 
                iconProps={{resizeMode: 'stretch'}}
              />
            </View>
          </View>
        </TestCase>

        <TestCase itShould="[label, labelStyle] 文本内容与自定义样式对比 (字体/字重/样式)">
          <View row spread padding-10>
            <Button
              label="Standard"
              backgroundColor={Colors.orange30}
            />
            <Button
              label="Custom Style"
              backgroundColor={Colors.orange30}
              labelStyle={{
                fontSize: 18,
                fontWeight: '900',
                fontStyle: 'italic',
                color: Colors.black,
                letterSpacing: 2
              }}
            />
          </View>
        </TestCase>

        <TestCase itShould="[labelProps] 文本截断模式 & 字体自适应对比">
           <View padding-10>
             <Text text90 grey40 marginB-5>ellipsizeMode: 'tail' (Default) vs 'middle'</Text>
             <View row spread marginB-15>
                <Button
                   label="Start..........................End"
                   backgroundColor={Colors.purple30}
                   style={{width: '48%'}}
                   labelProps={{numberOfLines: 1, ellipsizeMode: 'tail'}} 
                />
                <Button
                   label="Start..........................End"
                   backgroundColor={Colors.purple30}
                   style={{width: '48%'}}
                   labelProps={{numberOfLines: 1, ellipsizeMode: 'middle'}} 
                />
             </View>

             <Text text90 grey40 marginB-5>adjustsFontSizeToFit: false vs true</Text>
             <View row spread>
                <Button
                   label="Super Long Text Should Shrink"
                   backgroundColor={Colors.purple30}
                   style={{width: '48%'}}
                   labelProps={{numberOfLines: 1, adjustsFontSizeToFit: false}} 
                />
                <Button
                   label="Super Long Text Should Shrink"
                   backgroundColor={Colors.purple30}
                   style={{width: '48%'}}
                   labelProps={{numberOfLines: 1, adjustsFontSizeToFit: true}} 
                />
             </View>
           </View>
        </TestCase>

        <TestCase itShould="[avoidInnerPadding] 去除按钮内部左右间距对比">
          <View center padding-10>
            <Text text90 grey40 marginB-5>Default (Has Padding) vs No Padding</Text>
            <Button
              label="Standard Padding"
              backgroundColor={Colors.green30}
              marginB-10
            />
            <Button
              label="Standard Padding"
              backgroundColor={Colors.green30}
              avoidInnerPadding
            />
          </View>
        </TestCase>
        <TestCase itShould="[avoidMinWidth] 去除最小宽度限制对比 (短文本场景)">
          <View center padding-10>
            <Text text90 grey40 marginB-5>Default (Has MinWidth) vs No MinWidth</Text>
            
            <View row spread style={{width: '100%', justifyContent: 'space-around'}}>
              <View center>
                 <Button
                  label="OK"
                  size={Button.sizes.xSmall}
                  backgroundColor={Colors.green30}
                  marginB-5
                />
                <Text text100>Default</Text>
              </View>

              <View center>
                <Button
                  label="OK"
                  size={Button.sizes.xSmall}
                  backgroundColor={Colors.green30}
                  avoidMinWidth 
                  marginB-5
                />
                <Text text100>avoidMinWidth</Text>
              </View>
            </View>
          </View>
        </TestCase>

      </TestSuite>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    padding: 25,
  },
  title: {
    ...Typography.text20,
    color: Colors.$textDefault,
  },
  header: {
    ...Typography.text60,
    marginVertical: 20,
    color: Colors.$textDefault,
  },
});